﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView#templates">
    <CodeSnippetTabPage Text="Razor">@(@"<DxTreeView @ref=""@treeView""
            Data=""@ComponentsData.ComponentSets""
            CssClass=""demo-treeview-template""
            ChildrenExpression=""@(dataItem => ((ComponentSet)dataItem).ComponentSets)"">
    <NodeTemplate>
        @{
            var dataItem = (ComponentSet)context.DataItem;
        }
        @if (!context.IsLeaf)
        {
            <h4 class=""my-0 p-2 d-flex align-items-center"">
                <small class=""@GetExpandButtonCssClass(dataItem)"" style=""top: 0px""></small>
                <span class=""ml-3"">@dataItem.Title</span>
            </h4>
        }
        else
        {
            <div class=""media p-2"">
                <img class=""bg-primary rounded-circle mr-3 treeview-template-icon"" src=""@dataItem.ImageUrl"" alt=""@dataItem.Title"" />
                <div class=""media-body"">
                    <h5 class=""mt-0"">@dataItem.Title</h5>
                    @dataItem.Description
                </div>
            </div>
        }
    </NodeTemplate>
</DxTreeView>

@code {
    DxTreeView treeView;

    string GetExpandButtonCssClass(ComponentSet nodeDataItem)
    {
        return String.Format(""demo-icon-{0}"", treeView.GetNodeExpanded(n => n.DataItem == nodeDataItem) ? ""collapse"" : ""expand"");
    }
}")</CodeSnippetTabPage>
</CodeSnippetTabbed>
